<!--导出数据-->
<template>
  <div
    v-if="exporDataVitival || exporCompleteVitival"
    class="zz-dialog shadow"
    v-drag>
    <div class="zz-dialog-header border-bottom clear">
      <p class="zz-dialog-title orange">{{title}}</p>
      <div class="zz-dialog-headerbtn">
        <i class="iconfont icon-x" @click.stop='close()'></i>
      </div>
    </div>

    <div class="zz-dialog-body">
      <div v-if="exporDataVitival" class="exporting">数据正在导出中，请稍后...</div>
      <div v-if="exporCompleteVitival" class="exporting">数据导出完成，请<a class="click" @click="exportComplete()">下载</a></div>
    </div>

  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        title: '导出数据',
        exporDataVitival: false,
        exporCompleteVitival: false,
        data: {},
        startUrl: '',
        completeUrl: ''
      }
    },
    methods: {
      open (item) {
        this.exporDataVitival = true
        let {data, startUrl, completeUrl} = item
        this.data = data
        this.startUrl = startUrl
        this.completeUrl = completeUrl
        this.exportStart()
      },
      closeExporting () {
        this.exporDataVitival = false
      },
      closeExportcomplete () {
        this.exporCompleteVitival = false
      },
      // 创建导出数据
      exportStart () {
        let url = this.startUrl
        this.$axios({
          method: 'post',
          url: url,
          data: this.$qs.stringify(this.data, {indices: false})
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.closeExporting()
            this.exporCompleteVitival = true
          }
        })
      },
      // 导出报表
      exportComplete () {
        let url = this.completeUrl
        this.$export(url, this.data)
        this.closeExportcomplete()
      },
      close () {
        this.closeExporting()
        this.closeExportcomplete()
      }
    }
  }
</script>

<style scoped lang="scss">
  .zz-dialog{
    position: fixed;
    z-index: 10;
    min-width: 240px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 3px;
    top: 45%;
    left: 45%;
  }
  .zz-dialog-header{
    height: 15px;
    line-height: 15px;
    padding: 15px 20px;
    font-size: $font-size-base;
    border-bottom: 1px solid $color-line;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    .zz-dialog-title{
      float: left;
      font-size: $font-size-base;
    }
    .zz-dialog-headerbtn{
      float: right;
      color: #afbcc2;
      cursor: pointer;
    }
    .zz-dialog-headerbtn:hover{
      color: $red;
    }
    .icon-x{
      font-size: 24px
    }
  }
  .zz-dialog-body{
    padding: 15px 20px;
  }
  .exporting {
    width: 250px;
    height: 50px;
    text-align: center;
    padding-top: 20px;
    display: table-cell;
  }
  .click{
    cursor: pointer;
    color: $color;
    &:hover{
      color: $color-hover;
    }
  }
</style>
